<template>
  <div class="content-box">
    <div class="top-box">
      <div class="tab-box flex ac jb">
        <!--  @tab-click="onSearch(1)" -->
        <el-tabs v-model="nodeActive" @tab-click="tabClickFunc">
          <el-tab-pane v-for="(item, index) in node_list" :key="index" :label="item.node_name"
            :name="item.id + ''"></el-tab-pane>
        </el-tabs>
        <el-button class="his-btn" @click="hisDrawer = true" size="small">历史记录</el-button>
      </div>
    </div>
    <div class="scroll-view-box" v-loading="pageLoading">
      <div class="data-box-left">
        <div class="user-title-box" v-if="$fieldShowFunc('23-xmxx')">项目信息</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="项目名称" v-if="$fieldShowFunc('zlys_xmmc')">
            <div class="justify_6" slot="label">项目名称</div>
            {{ dataObj.project_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目编号" v-if="$fieldShowFunc('zlys_xmbh')">
            <div class="justify_6" slot="label">项目编号</div>
            <el-button @click="goToProjectFunc" type="text" style="padding: 0;">{{ dataObj.project_number || '--'
            }}</el-button>
          </el-descriptions-item>
          <el-descriptions-item label="项目品牌" v-if="$fieldShowFunc('zlys_xmpp')">
            <div class="justify_6" slot="label">项目品牌</div>
            {{ dataObj.brand_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="项目类型" v-if="$fieldShowFunc('zlys_xmlx')">
            <div class="justify_6" slot="label">项目类型</div>
            {{ dataObj.store_type_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 2, 0)" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('23-zlys')">质量验收</div>
        <el-descriptions class="margin-bottom" :column="3" border>
          <el-descriptions-item label="验收节点" v-if="$fieldShowFunc('zlys_ysjd')">
            <div class="justify_6" slot="label">验收节点</div>
            {{ dataObj.node_name || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="是否通过" v-if="$fieldShowFunc('zlys_sftg')">
            <div class="justify_6" slot="label">是否通过</div>
            {{ dataObj.is_completed == 1 ? '未完成' : '已完成' }}
          </el-descriptions-item>
          <el-descriptions-item label="验收申请时间" v-if="$fieldShowFunc('zlys_yssqsj')">
            <div class="justify_6" slot="label">验收申请时间</div>
            {{ dataObj.application_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item label="验收通过时间" v-if="$fieldShowFunc('zlys_ystgsj')">
            <div class="justify_6" slot="label">验收通过时间</div>
            {{ dataObj.acceptance_at || '--' }}
          </el-descriptions-item>
          <el-descriptions-item labelClassName="descriptions_opacity" contentClassName="descriptions_opacity"
            v-for="key in $fieldRowFunc(1, 2, 1, ['zlys_ysbz'])" :key="key"></el-descriptions-item>
        </el-descriptions>
        <div class="user-title-box" v-if="$fieldShowFunc('zlys_ysbz')">验收标准</div>
        <template v-if="$fieldShowFunc('zlys_ysbz')">
          <template v-for="(item, index) in dataObj.criteria_list">
            <div class="node-item-box" v-if="item.content_type == 1" :key="item.id">
              <p class="node-item-box-title" :style="{ color: dataObj.node_status == 6 ? '#3B75FF' : '' }">
                <i class="el-icon-check" v-if="dataObj.node_status == 6" style="margin-right: 5px;"></i>
                <span style="font-weight: bold;">{{ `${index
                  + 1}.` }}</span>
                {{ `${item.node_name}` }}
              </p>
              <p class="node-item-box-desc">{{ item.content || '--' }}</p>
            </div>
            <div class="node-item-box" v-else :key="item.id">
              <p class="node-item-box-title" :style="{ color: dataObj.node_status == 6 ? '#3B75FF' : '' }">
                <i class="el-icon-check" v-if="dataObj.node_status == 6" style="margin-right: 5px;"></i>
                <span style="font-weight: bold;">{{ `${index
                  + 1}.` }}</span>
                {{ `${item.node_name}` }}
              </p>
              <div class="file-box-img-box flex ac">
                <span v-if="!item.node_files.length">--</span>
                <template v-for="(i, k) in item.node_files">
                  <div class="file-box-img" :key="k">
                    <el-tooltip class="item" effect="dark" :content="i.name || i.file_name" placement="top">
                      <img class="img" :src="$fileImgFunc(i)" @click="$fileViewHandle(i)" />
                    </el-tooltip>
                  </div>
                </template>
              </div>
            </div>
          </template>
          <div class="node-item-box" v-if="dataObj.is_payment_review == 1">
            <p class="node-item-box-title" :style="{ color: dataObj.node_status == 6 ? '#3B75FF' : '' }">
              <i class="el-icon-check" v-if="dataObj.node_status == 6" style="margin-right: 5px;"></i>
              <span style="font-weight: bold;">{{ `${dataObj.criteria_list.length
                + 1}.` }}</span>
              进度款
            </p>
            <p class="node-item-box-desc">{{ dataObj.node_status == 6 ? '已收款' : '未收款'}}</p>
          </div>
        </template>
      </div>
    </div>
    <!-- 历史弹窗 -->
    <el-drawer @close="hisDrawer = false" title="历史记录" :visible.sync="hisDrawer" :with-header="false" size="600px">
      <div class="right-box">
        <div class="title-box flex ac fw" style="margin: 20px 0 0 10px">历史记录</div>
        <el-timeline class="timeline">
          <template v-if="!logList.length">
            <el-empty description="无历史数据"></el-empty>
          </template>
          <el-timeline-item v-for="(item, index) in logList" :key="index">
            <div class="setp-box">
              <div class="setp-top flex ac jb">
                <p class="time">{{ item.updated_at || '' }}</p>
                <div class="user-box flex ac">
                  <img class="avater" :src="item.handlers_image" />
                  {{ item.handlers_name + "-" + item.handlers_position }}
                </div>
              </div>
              <div class="setp-content">
                <div class="title">
                  {{ item.content }}
                </div>
                <!-- 提交 -->
                <template v-if="item.log_status == 320 && $fieldShowFunc('zlys_ysbz')">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <template v-for="(node, nodeIndex) in item.form_data.nodes">
                        <!-- 文本 -->
                        <div class="table-item" :key="nodeIndex" v-if="!node.file.length && node.name">
                          <span class="table-item-title" v-if="node.name"> <span style="font-weight: bold;;"> {{
                            nodeIndex + 1 + '.' }}</span>{{ node.name
                              }}</span>
                          <span class="table-item-content" v-if="node.name">{{
                            node.content || "--"
                          }}</span>
                        </div>
                        <!-- 文件 -->
                        <div class="table-item fw" :key="nodeIndex" v-if="node.file && node.file.length && node.name">
                          <span class="table-item-title" v-if="node.name"> <span style="font-weight: bold;;">{{
                            nodeIndex + 1 + '.' }}</span>{{ node.name
                              }}</span>
                          <div class="img-list-box flex ac fw" v-if="node.name">
                            <template v-for="(file, index) in node.file">
                              <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top"
                                :key="index">
                                <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                              </el-tooltip>
                            </template>
                            <span v-if="!node.file || !node.file.length">--</span>
                          </div>
                        </div>
                      </template>
                    </div>
                  </div>
                </template>
                <!-- 审核 -->
                <template v-if="(item.log_status == 330 || item.log_status == 340) && $fieldShowFunc('zlys_ysbz')">
                  <div class="content-table">
                    <div class="flex jb fw">
                      <template v-for="(node, nodeIndex) in item.form_data.node_data.criteria_list">
                        <!-- 文本 -->
                        <div class="table-item" :key="nodeIndex" v-if="node.content_type == 1">
                          <span class="table-item-title">
                            <i v-if="item.form_data.data_arr[nodeIndex].audit_state == 2" class="el-icon-check"></i>
                            <i v-else class="el-icon-close"></i>
                            <span :class="item.form_data.data_arr[nodeIndex].audit_state == 2 ? 'his-bule' : 'his-red'">
                              <span style="font-weight: bold;"> {{ nodeIndex + 1 + '.' }}</span>{{ node.node_name }}
                            </span>
                          </span>
                          <span class="table-item-content">{{
                            node.content || "--"
                          }}</span>
                        </div>
                        <!-- 文件 -->
                        <div class="table-item fw" :key="nodeIndex" v-if="node.content_type == 2">
                          <span class="table-item-title">
                            <i v-if="item.form_data.data_arr[nodeIndex].audit_state == 2" class="el-icon-check"></i>
                            <i v-else class="el-icon-close"></i>
                            <span :class="item.form_data.data_arr[nodeIndex].audit_state == 2 ? 'his-bule' : 'his-red'">
                              <span style="font-weight: bold;;"> {{ nodeIndex + 1 + '.' }}</span>{{ node.node_name }}
                            </span>
                          </span>
                          <div class="img-list-box flex ac fw" v-if="node.node_files.length">
                            <template v-for="(file, index) in node.node_files">
                              <el-tooltip class="item" effect="dark" :content="file.file_name" placement="top"
                                :key="index">
                                <img @click="$fileViewHandle(file)" class="img" :src="$fileImgFunc(file)" />
                              </el-tooltip>
                            </template>
                          </div>
                          <span v-if="!node.node_files.length">--</span>
                        </div>
                        <!--  v-if="item.form_data.data_arr[nodeIndex].audit_state == 3" -->
                        <div class="reason-rejection" :key="nodeIndex + '11'">
                          审批意见：<span class="span">{{ item.form_data.data_arr[nodeIndex].reason_rejection || '--'
                          }}</span></div>
                      </template>
                    </div>
                  </div>
                </template>
              </div>
            </div>
          </el-timeline-item>
        </el-timeline>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import engineeringApi from '@/api/engineeringApi';

export default {
  name: 'qualityAcceptanceDetailPage',
  data() {
    return {
      zjxPrice: false,
      cbPrice: false,
      logList: [],
      dataObj: '',
      node_list: [],
      nodeActive: '',
      pageLoading: false,
      hisDrawer: false,
    };
  },
  computed: {

  },
  mounted() {
    if (this.$route.query.node_list) {
      this.node_list = JSON.parse(this.$route.query.node_list);
      console.log(this.node_list, "this.node_list")
    }
    if (this.$route.query.id) {
      this.nodeActive = this.$route.query.id + '';
    }
    this.qualityAcceptanceDetails();
  },
  methods: {
    // 
    tabClickFunc() {
      this.qualityAcceptanceDetails();
    },
    // 验收详情
    qualityAcceptanceDetails() {
      if (!this.nodeActive) return;
      this.pageLoading = true;
      engineeringApi.qualityAcceptanceDetails({
        node_id: this.nodeActive
      }).then(res => {
        console.log(res, "验收详情")
        this.pageLoading = false;
        if (res.code == 200) {
          res.data.log_list.forEach(item => {
            item.form_data = JSON.parse(item.form_data);
            if (item.form_data.nodes) {
              let nodes = item.form_data.nodes.filter(node => node.name);
              item.form_data.nodes = nodes;
            }
          })
          this.dataObj = res.data;
          this.logList = res.data.log_list;
        }
      })
    },
    // 去项目详情
    goToProjectFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/projectDetailNew',
        query: {
          id: this.dataObj.project_id
        }
      })
    },
  },
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/detail.scss';
</style>
<style lang="scss">
.labelClassName {
  width: 160px;
  background: #f5f8fe !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.contentClassName {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
}

.labelClassName2 {
  width: 160px;
  background: rgba(0, 0, 0, 0) !important;
  text-align: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  border: none !important;
}

.contentClassName2 {
  font-weight: 400 !important;
  font-size: 17px !important;
  color: #1b2431 !important;
  padding-left: 20px !important;
  border: none !important;
}
</style>